<template>
    <div id="header-content">
        <el-form id="header-query" label-width="90px" ref="searchParam" :model="searchParam">
            <el-form-item label="证券代码" prop="stockCode">
                <el-select
                    v-model="searchParam.stockCode"
                    filterable
                    clearable
                    remote
                    :remote-method="getStockCodeList"
                    @clear="getStockCodeList('')"
                    @visible-change="handleStockVisibleChange"
                    :loading="selectLoading"
                    size="mini"
                >
                    <el-option v-for="item in stockCodes" :key="item.dictKey" :label="item.dictKey + ' ' + item.dictKeyName" :value="item.dictKey">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="下达日期:" prop="directDate">
                <el-date-picker
                    v-model="searchParam.directDate"
                    type="date"
                    placeholder="年/月/日"
                    value-format="yyyyMMdd"
                    format="yyyy/MM/dd"
                    style="width:100%"
                    size="mini"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="产品代码" prop="fundCode">
                <RiskEntryInput @set-entry-data="getEntryslist" :returnDatas="searchParam.fundCode" />
            </el-form-item>
            <el-form-item label="审批结果" prop="approveResult">
                <el-select v-model="searchParam.approveResult" size="mini" filterable clearable>
                    <el-option v-for="(value, key) in approveResultType" :key="key" :label="value" :value="key"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="审批状态" prop="approveStatus" v-show="isOpen">
                <el-select v-model="searchParam.approveStatus" size="mini" filterable clearable>
                    <el-option v-for="(value, key) in approveStatusType" :key="key" :label="value" :value="key"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="审批类型" prop="approveType" v-show="isOpen">
                <el-select v-model="searchParam.approveType" size="mini" filterable clearable>
                    <el-option v-for="(value, key) in approveType" :key="key" :label="value" :value="key"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="审批人" prop="approverCode" v-show="isOpen">
                <el-select v-model="searchParam.approverCode" size="mini" filterable clearable>
                    <el-option
                        v-for="item in approverNameTypes"
                        :key="item.dictKey"
                        :label="item.dictKey + ' ' + item.dictKeyName"
                        :value="item.dictKey"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="合规结果" v-show="isOpen" prop="complianceResult">
                <el-select v-model="searchParam.complianceResult" size="mini" filterable clearable>
                    <el-option
                        v-for="item in complianceResultTypes"
                        :key="item.dictKey + item.dictKeyName"
                        :label="item.dictKeyName"
                        :value="item.dictKey"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="委托方向" v-show="isOpen" prop="entrustDirection">
                <el-select v-model="searchParam.entrustDirection" size="mini" filterable clearable>
                    <el-option
                        v-for="item in realDirectionTypes"
                        :key="item.dictKey + item.dictKeyName"
                        :label="item.dictKeyName"
                        :value="item.dictKey"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div style="text-align:right">
            <el-button type="primary" size="mini" @click="handleButton('reset')">重置</el-button>
            <el-button type="primary" size="mini" @click="handleButton('search')">查询</el-button>
            <el-button type="primary" size="mini" @click="isOpen = !isOpen">{{ isOpen ? '隐藏' : '展开' }}</el-button>
            <el-button type="primary" size="mini" @click="handleButton('doLayout')">布局设置</el-button>
        </div>
    </div>
</template>
<script lang="ts">
import RiskEntryInput from '@/common/components/risk-entry-input.vue';
import DictionConstUtil from '@/utils/diction-const-util';
import { Component, Vue, Watch, Prop } from 'vue-property-decorator';

@Component({ name: 'InstApprovalQueryCondition', components: { RiskEntryInput } })
export default class InstApprovalQueryCondition extends Vue {
    @Prop({
        default: {
            fundCode: '',
            stockCode: '',
            directDate: '',
            approveResult: '',
            approveStatus: '',
            approveType: '',
            approverCode: '',
            complianceResult: '',
            entrustDirection: '',
        },
    })
    searchParam: any;

    @Watch('searchParam', { deep: true })
    handleSearchParam(): void {
        this.$emit('comReturn', {
            isOpen: this.isOpen,
            searchParam: this.searchParam,
        });
    }

    isOpen: boolean = false;

    selectLoading: boolean = false;

    stockCodes: any[] = []; // 证券代码

    realDirectionTypes: any[] = []; // 委托方向

    approverNameTypes: any[] = []; // 下达人

    // 审批结果
    approveResultType: any = { '0': '未审批', '1': '审批通过', '2': '审批拒绝' };

    // 审批状态
    approveStatusType = {
        '0': '未审批',
        '1': '成功',
        '2': '失败',
        '3': '有警告',
    };
    // 审批类型
    approveType = {
        '0': '未审批',
        '1': '自动审批',
        '2': '手工审批',
    };

    complianceResultTypes = DictionConstUtil.PojoToList(DictionConstUtil.ThresholdType);

    @Prop({ default: false }) isFirst: boolean;

    mounted() {
        // this.isFirst &&
        this.getDict();
    }

    // 字典值
    async getDict() {
        // 下达人下拉列表
        this.$axios.post('/instruction/user/select').then((res: any) => {
            res.unshift({
                dictCode: 'system',
                dictKey: 'system',
                dictKeyName: '系统',
            });
            this.approverNameTypes = res;
        });

        // 委托方向
        this.realDirectionTypes = await DictionConstUtil.FNTradeDirection();

        await this.getStockCodeList('');
    }

    // 证券代码
    getStockCodeList(e: string) {
        this.selectLoading = true;
        return new Promise((resolve, reject) => {
            this.$axios
                .post('/dict/stock/select', {
                    dictKey: e,
                    dictKeyName: e,
                })
                .then((res: any) => {
                    this.stockCodes = res;
                    this.selectLoading = false;
                    resolve(res);
                })
                .catch(err => {
                    this.selectLoading = false;
                    reject(err);
                });
        });
    }

    openBtn() {
        this.isOpen = !this.isOpen;
        this.$emit('comReturn', {
            isOpen: this.isOpen,
            searchParam: this.searchParam,
        });
    }

    async handleButton(type: string) {
        if (type == 'reset') {
            await this.getStockCodeList('');
            (this.$refs['searchParam'] as any).resetFields();
        } else {
            this.$emit('handleButton', type);
        }
    }

    // 证券代码
    async handleStockVisibleChange(isShow: boolean) {
        if (!isShow && this.stockCodes.length < 1) {
            await this.getStockCodeList('');
        }
    }

    getEntryslist(val: any) {
        this.searchParam.fundCode = val;
    }
}
</script>
<style lang="scss" scoped>
#header-content {
    #header-query {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        /deep/ .el-form-item {
            margin-bottom: 0px;
            .el-form-item__label {
                color: black;
                padding-right: 2px;
            }
        }
    }

    #show-content {
        cursor: pointer;
    }
    /deep/ .el-select {
        width: 100%;
    }
}
</style>
